import React, { useEffect, useState } from 'react';
import { List, ImagePicker, InputItem, Button, Toast } from 'antd-mobile';

import { createForm } from 'rc-form';

import { useStoreHook } from 'think-react-store';

interface Props {
  form: any;
}

interface FormValue {
  tel: string;
  sign: string;
}

const Edit: any = (props: Props) => {
  const [files, setFiles] = useState([]);
  const { getFieldProps, validateFields } = props.form;

  const {
    user: { editUserAsync },
  } = useStoreHook();

  const handelChange = (files: any) => {
    console.log(files[0]);
    setFiles(files);
  };
  const handelSubmit = () => {
    if (!files.length) {
      Toast.fail('请上传图片');
      return;
    }
    validateFields((error: any, value: FormValue) => {
      if (error) {
        Toast.fail('请将信息补充完整');
        return;
      }
      editUserAsync({
        ...value,
        img: files[0]?.url,
      });
    });
  };

  useEffect(() => {
    console.log(props);
  });

  return (
    <div className="user-edit">
      <List>
        <List.Item>
          <ImagePicker
            files={files}
            selectable={files.length < 1}
            onChange={handelChange}
          />
        </List.Item>
        <List.Item>
          <InputItem
            {...getFieldProps('tel', {
              rules: [{ required: true }],
              initialValue: '123456',
            })}
            placeholder="电话"
          >
            电话：
          </InputItem>
          <InputItem
            {...getFieldProps('sign', {
              rules: [{ required: true }],
              initialValue: '签名',
            })}
            placeholder="签名"
          >
            签名：
          </InputItem>
        </List.Item>
      </List>
      <Button
        type="primary"
        onClick={handelSubmit}
        style={{ marginTop: '20px' }}
      >
        修改
      </Button>
    </div>
  );
};

export default createForm<Props>()(Edit);
